<template>
  <div class="contain-report">
    <div class="report-title">我的报告</div>
    <div class="report-nav">
      <div class="nav-box">
        <p style="margin-top: 10px">共计提交报告</p>
        <p style="text-align: center;margin-top: 10%;font-size: 26px;">{{ userSub.allNum }} <i
            style="font-size: 15px">份</i></p>
      </div>
      <div class="nav-box">
        <p style="margin-top: 10px">今日提交报告</p>
        <p style="text-align: center;margin-top: 10%;font-size: 26px;">{{ userSub.todayNum }} <i
            style="font-size: 15px">份</i></p>
      </div>
      <div class="nav-box">
        <p style="margin-top: 10px">共计提交人数</p>
        <p style="text-align: center;margin-top: 10%;font-size: 26px;">{{ userSub.personNum }} <i
            style="font-size: 15px">人</i></p>
      </div>
    </div>
    <div class="report-search">
      <p :style="lineForm.day === 0 ? 'color: #009cd2' : '' " @click="changeLineDay(0)">全部</p>
      <p :style="lineForm.day === 1 ? 'color: #009cd2' : '' " @click="changeLineDay(1)">今日</p>
      <p :style="lineForm.day === 2 ? 'color: #009cd2' : '' " @click="changeLineDay(2)">本周</p>
      <p :style="lineForm.day === 3 ? 'color: #009cd2' : '' " @click="changeLineDay(3)">本月</p>
      <p style="margin-right: 20px" :style="lineForm.day === 4 ? 'color: #009cd2' : '' " @click="changeLineDay(4)">
        全年</p>
      <el-date-picker
          v-model="lineTime"
          @change="changeLineDate"
          clearable
          size="small"
          style="width: 300px;margin-right: 10px"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
      </el-date-picker>
    </div>
    <div class="report-echarts" id="chart"></div>
    <div class="report-search">
      <p :style="form.day === 0 ? 'color: #009cd2' : '' " @click="changeDay(0)">全部</p>
      <p :style="form.day === 1 ? 'color: #009cd2' : '' " @click="changeDay(1)">今日</p>
      <p :style="form.day === 2 ? 'color: #009cd2' : '' " @click="changeDay(2)">本周</p>
      <p :style="form.day === 3 ? 'color: #009cd2' : '' " @click="changeDay(3)">本月</p>
      <p style="margin-right: 20px" :style="form.day === 4 ? 'color: #009cd2' : '' " @click="changeDay(4)">全年</p>
      <el-date-picker
          v-model="time"
          @change="changeDate"
          clearable
          size="small"
          style="width: 300px;margin-right: 10px"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-select placeholder="请选择实验室" @change="getList" clearable @close="form.laboratoryId = null"
                 v-model="form.laboratoryId" size="small" style="width: 200px;margin-right: 10px">
        <el-option
            v-for="item in laboratory"
            :key="item.id"
            :label="item.laboratoryName"
            :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select placeholder="请选择班级" @change="getList" clearable @close="form.classId = null"
                 v-model="form.classId" size="small" style="width: 200px;margin-right: 10px">
        <el-option
            v-for="item in classData"
            :key="item.id"
            :label="item.className"
            :value="item.id"
        >
        </el-option>
      </el-select>
      <el-input
          size="small"
          style="width: 200px"
          placeholder="请输入"
          clearable
          @clear="getList"
          v-model="form.name"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchList"></i>
      </el-input>
    </div>
    <div class="report-list" v-if="list.length !== 0" v-for="item in list" :key="item.id">
      <div class="list-box">
        <h3 style="margin-bottom: 10px">{{ item.name }}</h3>
        <span style="color: #999;">{{ item.description }}</span>
      </div>
      <div class="right">
        <div class="right-content">
          <span style="margin-bottom: 10px">得分:</span>
          <span>{{
              item.status === 0 ? '未评分' : item.status === 1 ? '已评分' : item.status === 2 ? item.scores : item.status === 3 ? '重做' : '已重新提交'
            }}</span>
        </div>
        <div class="right-date">
          <span style="margin-bottom: 10px">上传者:</span>
          <span>{{ item.userName }}</span>
        </div>
        <div class="right-date">
          <span style="margin-bottom: 10px">上传时间:</span>
          <span>{{ item.createTime }}</span>
        </div>
        <div class="right-content">
          <span style="margin-bottom: 10px">版本:</span>
          <span>{{ item.versionNumber }}</span>
        </div>
        <div class="btns">
          <el-button type="text" :disabled="item.status === 2" @click="playScore(item.id)">
            {{ item.status === 2 ? '已评分' : '评分' }}
          </el-button>
          <el-button type="text" @click="seeDetails(item)">查看</el-button>
          <el-button type="text" @click="historyReport(item.id)">版本</el-button>
          <el-button type="text" @click="deleteReport(item.id)">删除</el-button>
        </div>
      </div>
    </div>
    <div class="report-nolist" v-if="list.length === 0">
      <el-empty description="暂无数据"></el-empty>
    </div>
    <div class="report-page">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[3]"
          :page-size="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog
        :show-close="false"
        :visible.sync="history"
        width="40%"
    >
      <div class="dialog-box">
        <div class="box-top">历史版本</div>
        <div class="box-body" v-if="historyList.length !== 0">
          <p style="font-size: 20px">报告名称 : <span style="font-weight: bold">{{ fileTitle }}</span></p>
          <div class="file-list">
            <div class="file-box" v-for="item in historyList" :key="item.id">
              <p class="left">
                <span>{{ item.createTime }}</span>
                <span v-show="item.type === 1">当前版本</span>
              </p>
              <el-button type="text" size="mini" @click="downloadFile(item.url)">下载</el-button>
            </div>
          </div>
        </div>
        <div v-if="historyList.length === 0">
          暂无历史版本
        </div>
      </div>
    </el-dialog>

    <el-dialog
        :show-close="false"
        :visible.sync="editDialog"
        width="40%"
    >
      <div class="dialog-box">
        <div class="box-top">查看报告</div>
        <div class="box-body">
          <el-form label-width="80px">
            <el-form-item label="报告名称:">
              <el-input placeholder="请输入报告名称" disabled v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="报告描述:">
              <el-input type="textarea" disabled v-model="editForm.description" placeholder="请输入报告描述(可选)"
                        :rows="1"></el-input>
            </el-form-item>
            <el-form-item label="实验室:">
              <el-select placeholder="请选择实验室" disabled v-model="editForm.laboratoryId" style="width: 100%">
                <el-option
                    v-for="item in laboratory"
                    :key="item.id"
                    :label="item.laboratoryName"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="text" @click="openUrl(editForm.url,editForm.id)">查看文件</el-button>
            </el-form-item>
          </el-form>
          <div class="form-btn">
            <el-button size="small" @click="editDialog = false">关 闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-drawer
        size='50%'
        close-on-press-escape
        :visible.sync="dialog"
        :with-header="false">
      <div class="docWrap" v-if="showFile === 0">
        <!-- 预览文件的地方（用于渲染） -->
        <div ref="file"></div>
      </div>
      <iframe :src="fileUrl" v-if="showFile === 1" style="width: 100%;height: 100%"></iframe>
    </el-drawer>

    <el-dialog
        :visible.sync="scoreDialog"
        width="30%"
    >
      <div class="dialog-box">
        <div class="box-top">评分</div>
        <div class="box-body">
          <el-form label-width="80px">
            <el-form-item label="分数:">
              <el-input v-model="scoreForm.scores" placeholder="请输入分数"></el-input>
            </el-form-item>
            <el-form-item label="结论:">
              <el-input v-model="scoreForm.remark" placeholder="请输入结论"></el-input>
            </el-form-item>
          </el-form>
          <div class="form-btn">
            <el-button type="primary" @click="subScore(1)" size="small">通 过</el-button>
            <el-button size="small" @click="subScore(2)">重 做</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  laboratoryList,
  reportNum,
  deleteReportById,
  historyReportById,
  lineList,
  classList,
  teacherList,
  teacherScore
} from '../../api/laboratory'
import request from "../../utils/request";

let docx = require("docx-preview");
export default {
  name: "report",
  data() {
    return {
      disabled: false,
      upload: false,
      history: false,
      historyList: [],
      fileTitle: '',
      //实验室集合
      laboratory: [],
      time: null,
      userSub: {},
      //接口data
      form: {
        day: 0,
        endTime: "",
        laboratoryId: null,
        classId: null,
        name: "",
        pageIndex: 1,
        pageSize: 3,
        startTime: ""
      },
      total: null,
      list: [],
      lineForm: {
        day: 0,
        endTime: "",
        startTime: ""
      },
      listArr: [],
      lineTime: null,
      classData: [],
      editDialog: false,
      editForm: {},
      scoreDialog: false,
      scoreForm: {
        reportId: null,
        scores: null,
        status: null,
        remark: ''
      },
      dialog: false,
      showFile: null,
      fileUrl: ''
    }
  },
  mounted() {
    this.getLaboratory()
    this.getList()
    this.getLineList()
    this.getReportNum()
    this.getClassList()
  },
  methods: {
    openUrl(url, id) {
      this.editDialog = false
      let parts = url.split(".");
      let extension = parts[parts.length - 1];
      console.log(extension)
      if (extension === 'docx' || extension === 'DOCX') {
        this.dialog = true
        this.showFile = 0
        request({
          url: "/upload/getReport/" + id,
          method: 'get',
          responseType: 'blob',
        }).then(resp => {
          docx.renderAsync(resp.data, this.$refs.file); // 渲染到页面
        })
      } else if (extension === 'doc' || extension === 'DOC') {
        this.downLoad(url)
      } else {
        this.dialog = true
        this.showFile = 1
        this.fileUrl = url
      }

    },
    init() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月',]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '数量',
            data: this.listArr,
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                color: '#3ba1ff'
              },
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('chart'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    //查询实验室
    async getLaboratory() {
      const {data} = await laboratoryList()
      if (data.code === 200) {
        this.laboratory = data.data
      }
    },
    //报告列表
    async getList() {
      const {data} = await teacherList(this.form)
      if (data.code === 200) {
        console.log(data.data)
        this.list = data.data.data
        this.total = data.data.total
      }
    },
    async getReportNum() {
      const {data} = await reportNum()
      if (data.code === 200) {
        console.log("this.userSub", this.userSub)
        this.userSub = data.data
      }
    },
    changeDate(val) {
      if (val) {
        this.form.startTime = val[0]
        this.form.endTime = val[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }

      this.getList()
    },
    changeDay(val) {
      this.form.day = val
      this.getList()
    },
    changeLineDay(val) {
      this.lineForm.day = val
      this.getLineList()
    },
    changeLineDate(val) {
      if (val) {
        this.lineForm.startTime = val[0]
        this.lineForm.endTime = val[1]
      } else {
        this.lineForm.startTime = ''
        this.lineForm.endTime = ''
      }
      this.getLineList()
    },
    async getClassList() {
      const {data} = await classList()
      console.log('pppp', data)
      if (data.code === 200) {
        this.classData = data.data.data
      }
    },
    async getLineList() {
      const {data} = await lineList(this.lineForm)
      if (data.code === 200) {
        this.listArr = data.data.data
        await this.init()
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.form.pageIndex = val
      this.getList()
    },
    searchList() {
      if (!this.form.name) {
        this.$message.warning('请输入报告名称')
      } else {
        this.getList()
      }
    },
    handleChange(res, file) {
      console.log(res)
      if (res.code === 200) {
        this.$message.success('文件上传成功')
        this.disabled = true
        this.uploadForm.url = res.data.fileUrl
      }
    },
    deleteReport(id) {
      this.$confirm('此操作将永久删除该报告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteReportById(id).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getList()
          }
        })
      }).catch(() => {
        this.$message.warning('已取消删除')
      });
    },
    async historyReport(id) {
      this.history = true
      const {data} = await historyReportById(id)
      console.log(data)
      if (data.code === 200) {
        this.historyList = data.data.data
        this.fileTitle = this.historyList[0].name
      }
    },
    downloadFile(url) {
      if (!url) {
        this.$message.error('暂无报告文件')
      } else {
        this.$confirm('下载该报告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.open(url, '_blank')
        }).catch(() => {
          this.$message.info('已取消下载')
        });

      }
    },
    seeDetails(item) {
      this.editDialog = true
      this.editForm = item
    },
    playScore(id) {
      this.scoreDialog = true
      this.scoreForm.reportId = id
    },
    async subScore(val) {
      this.scoreForm.status = val
      for (let key in this.scoreForm) {
        if (!this.scoreForm[key]) {
          return this.$message.error('请将分数及实验结论填写完毕')
        }
      }
      const {data} = await teacherScore(this.scoreForm)
      if (data.code === 200) {
        this.$message.success(data.message)
        this.scoreForm.scores = ''
        this.scoreForm.remark = ''
        this.scoreDialog = false
        await this.getList()
      }
    }
  },
}
</script>

<style scoped lang="less">
.contain-report {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;

  .dialog-box {
    width: 100%;
    min-height: 50vh;
    border-radius: 5px;
    overflow: hidden;

    .box-top {
      width: 100%;
      height: 10vh;
      background-image: linear-gradient(to left, #948af1 0%, #c193db 50%, #ed9bc6 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #fff;
    }

    .box-body {
      width: 100%;
      height: 80%;
      padding: 5% 10%;
      box-sizing: border-box;
      background-color: #ffffff;

      /deep/ .el-input__inner {
        border: none;
        background-color: #ecedef;
      }

      /deep/ .el-textarea__inner {
        border: none;
        background-color: #ecedef;
      }

      .form-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .file-list {
        margin-top: 20px;
        width: 100%;

        .file-box {
          margin-top: 10px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }

  .report-title {
    font-size: 22px;
    color: #666;
  }

  .report-nav {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: space-around;

    .nav-box {
      width: 20%;
      height: 150px;
      border-radius: 10px;
      overflow: hidden;
      padding: 20px;
      box-sizing: border-box;
      background: url("../../assets/loginImg/one.png") no-repeat;
      background-size: 100%, 100%;

      &:nth-child(2) {
        background: url("../../assets/loginImg/two.png") no-repeat;
      }

      &:nth-child(3) {
        background: url("../../assets/loginImg/three.png") no-repeat;
      }

      &:nth-child(4) {
        background: url("../../assets/loginImg/four.png") no-repeat;
      }

      &:hover {
        cursor: pointer;
        transform: translateY(-5px);
        transition: all 1s ease;
      }
    }
  }

  .report-echarts {
    margin: 20px auto;
    width: 50%;
    height: 300px;
  }

  .report-search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    p {
      margin: 0 10px;
      box-sizing: border-box;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .report-list {
    width: 100%;
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 #ccc;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .list-box {
      width: 45%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      overflow: hidden;

      span {
        width: 100%;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .right {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .right-content {
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        color: #999;
      }

      .right-date {
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        color: #999;
      }

      .btns {
        width: fit-content;
        padding: 0 5%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
      }
    }

  }

  .report-nolist {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .report-add {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .add-box {
      width: 49%;
      border-radius: 5px;
      border: 1px dashed #6ba9ff;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        font-size: 20px;
        color: #6ba9ff;
        margin-right: 5px;
      }

      span {
        font-size: 16px;
        color: #6ba9ff;
      }

      &:hover {
        cursor: pointer;
      }
    }
  }

  .report-page {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
